{% extends 'layouts/base.html' %}
{% block content %}
<link rel="stylesheet" href="{{config['application']['site']['assetsUri']}}fullcalendar/fullcalendar.min.css" />
<link rel="stylesheet" href="{{config['application']['site']['assetsUri']}}fullcalendar/fullcalendar.print.css" media='print' />
<script src="{{config['application']['site']['assetsUri']}}fullcalendar/moment.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}fullcalendar/jquery.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}fullcalendar/fullcalendar.min.js"></script>
<script src="{{config['application']['site']['assetsUri']}}fullcalendar/zh-cn.js"></script>
<div class="row">
    <div class="col-xs-12">
            <div id='calendar'></div>
        
    </div><!-- /.col -->
</div><!-- /.row -->
<style>
#calendar {
    max-width: 900px;
    margin: 0 auto;
}
</style>
{% endblock %}
{% block script %}
<script type="text/javascript">
    $(document).ready(function(){
        $('#calendar').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                defaultDate: '2016-01-12',
                selectable: true,
                selectHelper: true,
                select: function(start, end) {
                        var title = prompt('Event Title:');
                        var eventData;
                        if (title) {
                                eventData = {
                                        title: title,
                                        start: start,
                                        end: end
                                };
                                console.log(eventData);
                                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                        }
                        $('#calendar').fullCalendar('unselect');
                },               
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: [
                        {
                            title: '嘎嘎嘎嘎嘎',
                            start: '2016-01-01'
                        },
                        {
                            title: '犯得上发生飞洒',
                            start: '2016-01-01'
                        },
                        {
                            title: '嘎嘎嘎嘎嘎',
                            start: '2016-01-01'
                        },
                        {
                            title: '嘎嘎嘎嘎嘎',
                            start: '2016-01-01'
                        },
                        {
                            title: '嘎嘎嘎嘎嘎',
                            start: '2016-01-01'
                        },
                        {
                            title: '嘎嘎嘎嘎嘎',
                            start: '2016-01-01'
                        }
                ]
        });
    });
</script>
{% endblock %}
